<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="f-search">
            <el-input placeholder="请输入内容" v-model="query" clearable @clear="clearSearch">
                <template slot="append">
                    <i class="el-icon-search" @click="search"></i>
                </template>
            </el-input>
        </div>
        <div class="f-btn">
            <el-button type="primary" size="default" @click="$router.push('/goods/add')">增加</el-button>
        </div>
        <!-- card body -->
        <!-- 表格区域 -->
        <el-table :data="goodList" border height="680px">
            <el-table-column prop="goods_id" label="商品ID"></el-table-column>
            <el-table-column prop="goods_name" label="商品名称"></el-table-column>
            <el-table-column prop="goods_price" label="价格"></el-table-column>
            <el-table-column prop="goods_number" label="数量"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-tag type="danger" size="normal" v-if="scope.row.goods_state==null">未通过</el-tag>
                    <el-tag type="danger" size="normal" v-if="scope.row.goods_state==0">未通过</el-tag>
                    <el-tag type="warning" size="normal" v-if="scope.row.goods_state==1">审核中</el-tag>
                    <el-tag type="primary" size="normal" v-if="scope.row.goods_state==2">已通过</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="add_time" label="创建时间">
                <template slot-scope="scope">{{scope.row.add_time | dataFormate}}</template>
            </el-table-column>
            <el-table-column prop="hot_number" label="是否热销">
                <template slot-scope="scope">
                    <el-tag type="danger" size="normal" v-if="scope.row.hot_number">是</el-tag>
                    <el-tag type="danger" size="normal" v-else>否</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template>
                    <el-button type="success" size="small" icon="el-icon-s-tools"></el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
            background
            layout="sizes,prev,pager,next,jumper,->,total"
            :page-size="pagesize"
            :current-page="pagenum"
            :page-sizes="[10,20,30,40]"
            :total="total"
            @size-change="sizeChange"
            @current-change="pageChange"
        ></el-pagination>
    </el-card>
</template>
<script>
export default {
    data() {
        return {
            query: "",
            goodList: [],
            pagenum: 1,
            pagesize: 10,
            total: 0,
        };
    },
    methods: {
        clearSearch() {
            this.query = "";
            this.search();
        },
        search() {
            this.pagenum = 1;
            this.getGoodList();
        },
        async getGoodList() {
            let { data: res } = await this.$axios.get("goods", {
                params: {
                    query: this.query,
                    pagenum: this.pagenum,
                    pagesize: this.pagesize,
                },
            });
            if (res.meta.status !== 200)
                return this.$message.error(res.meta.msg);
            this.total = res.data.total;
            this.goodList = res.data.goods;
        },
        // 修改每页的展示个数
        sizeChange(val) {
            this.pagesize = val;
            this.pagenum = 1;
            this.getGoodList();
        },
        // 页码修改
        pageChange(val) {
            this.pagenum = val;
            this.getGoodList();
        },
    },
    created() {
        this.getGoodList();
    },
};
</script>
<style lang="less">
</style>
